<template>
  <div class="blog-wrapper">
    <div class="background-wrapper"></div>
    <the-header></the-header>
    <the-full-screen-item></the-full-screen-item>
    <router-view></router-view>
    <the-footer></the-footer>
  </div>
</template>
<script>
  import TheHeader from '@/components/TheHeader'
  import TheFooter from '@/components/TheFooter'
  import TheFullScreenItem from '@/components/TheFullScreenItem'

  export default {
    components: {
      TheHeader,
      TheFooter,
      TheFullScreenItem
    }
  }
</script>
<style lang="stylus">
  .background-wrapper
    position fixed
    top: 0
    z-index 0
    width: 100%
    height:100vh
    background url("../../assets/img/70108899_p1.jpg") no-repeat center
    background-size auto 110%
    opacity 0.5
    overflow auto
</style>
